<!--  -->
<template>
  <div id="article" class="border flex column grow">
    <div class="head flex shrink">
      <span class="back" @click="goBack"><i class="icon"></i>返回</span>
    </div>
    <div class="flex grow">
      <div class="flex shrink column articleList">
        <div class="list">
          <div
            class="item"
            v-for="(item, index) in articleList"
            :key="item.articleId"
            :class="{ cur: index == cur }"
            @click="toggle(index)"
          >
            <p class="title">{{ item.articleTitle }}</p>
            <p class="time">{{ item.publishTime }}</p>
          </div>
          <div class="loadMore" @click="loadMore" v-show="moreShow">
            加载更多...
          </div>
        </div>
      </div>
      <div class="flex grow column articleDetail" v-if="articleList.length > 0">
        <div class="box" ref="articleDetail">
          <div class="title">{{ articleList[cur].articleTitle }}</div>
          <div class="time">{{ articleList[cur].publishTime }}</div>
          <div
            class="detail"
            v-html="articleList[cur].articleContent"
            @click="viewImg"
          ></div>
        </div>
      </div>
    </div>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
  </div>
</template>

<script>
import { userClickUpdate, queryArticleList } from "../api/index";
import dayjs from "dayjs";
import openImg from "../component/openImg";
import { imgPath } from "../script/utils";
import behavior from "@/common/behavior";
import { CLIENT } from "@/common/const";
// import behavior from "../../modules/behavior";

const userData = { ...behavior };
export default {
  data() {
    return {
      path: CLIENT,
      cur: 0,
      imgSrc: "",
      params: {
        limit: 10,
        articleType: "",
      },
      articleList: [],
      count: 1,
      token: "",
      total: 0,
      moreShow: false,
    };
  },
  watch: {
    cur() {
      this.$refs.articleDetail.scrollTop = 0;
    },
  },
  beforeRouteEnter(to, from, next) {
    const { articleType, token } = to.params;
    next((vm) => {
      vm.cur = 0;
      vm.params.articleType = articleType;
      vm.token = token;
      vm.articleList = [];
      vm.moreShow = false;
      vm.getArticleList();
    });
  },
  components: { openImg },

  computed: {},

  mounted() {},

  methods: {
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    loadMore() {
      if (this.total < this.paramslimit * this.count) return;
      this.count++;
      this.params.limit = this.params.limit * this.count;
      this.getArticleList();
    },
    async toggle(index) {
      this.cur = index;
      userData.event[0].eventSubject.endtime = Date.now();
      await userClickUpdate(userData).then((back) => {
        if (back.status == 1) {
        }
      });
      userData.event[0].eventSubject.starttime = Date.now();
    },
    userClick() {
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.module.moduleCode = "0006";
      userData.user.token = this.token;
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey =
        this.articleList[this.cur].articleId;
      userData.event[0].eventSubject.extend.openTime = openTime;
    },
    async getArticleList() {
      await queryArticleList(this.params).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.total = data.length;
          this.moreShow = true;
          if (data.length < this.params.limit * this.count) {
            this.moreShow = false;
          }

          this.articleList = data.map((item) => {
            item.publishTime = dayjs(item.publishTime).format(
              "YYYY-MM-DD HH:mm"
            );
            item.articleContent = imgPath(item.articleContent);
            return item;
          });
          this.userClick();
        }
      });
    },
  },
};
</script>
<style>
.detail img {
  display: block;
  max-width: 90% !important;
}
</style>
<style lang="scss" scoped>
.border {
  border: 1px solid #27272d;
}
#article {
  width: 1200px;
  margin: 10px auto 20px;
  border-radius: 6px;
  .head {
    height: 34px;
    background: #27272d;
    align-items: center;
    padding-left: 14px;
    color: #a9adb1;
    font-size: 14px;
    .back {
      cursor: pointer;
    }
    .icon {
      display: inline-block;
      width: 8px;
      height: 12px;
      background: url(../images/back.png) no-repeat center;
      background-size: 100%;
      margin-right: 8px;
    }
  }
  .articleList {
    width: 240px;
    .list {
      overflow: auto;
      .item {
        min-height: 112px;
        background: #15151b;
        border-top: 1px solid #09090f;
        padding: 15px 26px 20px 16px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover,
        &.cur {
          background: #2d3145;
        }
        .title {
          font-size: 18px;
          color: #dddddd;
          word-break: break-all;
          line-height: 28px;
        }
        .time {
          color: #bbbfc3;
          font-size: 14px;
          padding-top: 11px;
        }
      }
      .loadMore {
        color: #dddddd;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
  }
  .articleDetail {
    .box {
      padding: 0 42px;
      overflow: auto;
      .title {
        color: #dddddd;
        font-size: 24px;
        padding: 29px 0 20px;
        word-break: break-all;
        text-align: center;
      }
      .time {
        color: #cbcbcb;
        font-size: 15px;
        text-align: center;
        padding-bottom: 18px;
        margin-bottom: 15px;
        border-bottom: 1px solid #1b1d21;
      }
      .detail {
        color: #b1b5c7;
        font-size: 18px;
        line-height: 30px;
        word-break: break-all;
      }
    }
  }
}
</style>
